<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的HTML学习笔记</title>
</head>
<body>
    <header>
        <h1>我的HTML学习笔记</h1>
        <h2>从入门到实践</h2>
    </header>
    
    <nav>
        <ul>
            <li><a href="#home">登录</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    
    <main>
        <article>
            <section>
                <h3>HTML基础知识</h3>
                <p><strong>HTML</strong>（超文本标记语言）是构建网页的<em>基础</em>。<br>
                它使用标签来定义网页的结构和内容。</p>
                
                <p>在学习HTML时，我们经常需要表示特殊字符，例如：&lt;p&gt;表示段落标签。<br>
                或者使用<mark>语义化标签</mark>如&lt;header&gt;、&lt;footer&gt;等。</p>
                
                <h4>我学到的HTML知识点：</h4>
                <ul>
                    <li>HTML文档基本结构</li>
                    <li>语义化标签的使用</li>
                    <li>文本格式化元素</li>
                </ul>
                
                <h4>学习HTML的步骤：</h4>
                <ol>
                    <li>了解HTML基本概念</li>
                    <li>学习常用标签和属性</li>
                    <li>实践构建简单网页</li>
                </ol>
            </section>
            
            <section>
                <h3>HTML术语解释</h3>
                <dl>
                    <dt>DOCTYPE</dt>
                    <dd>文档类型声明，告诉浏览器使用哪个HTML版本来解析页面</dd>
                    
                    <dt>语义化</dt>
                    <dd>使用有意义的标签来描述内容的结构和含义</dd>
                    
                    <dt>响应式设计</dt>
                    <dd>使网页能够适应不同设备的屏幕尺寸</dd>
                </dl>
                
                <p>更多HTML学习资源可以参考：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN HTML文档</a></p>
                
<img src="public/p1.png" alt="HTML示例图片">
            </section>
            
            <aside>
                <h4>补充信息</h4>
                <p>HTML5是最新的HTML标准，提供了许多新特性和API。</p>
                <p>建议结合CSS和JavaScript一起学习，构建完整的网页。</p>
            </aside>
            
            <table>
                <thead>
                    <tr>
                        <th>HTML版本</th>
                        <th>发布时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML 4.01</td>
                        <td>1999年12月</td>
                    </tr>
                    <tr>
                        <td>HTML5</td>
                        <td>2014年10月</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2025 我的HTML学习笔记 | 版权所有</p>
    </footer>
</body>
</html>